<template>
  <view style="margin-top: 50rpx;">
    <view>
      <u-navbar
          :safeAreaInsetTop="false"
          title="信息中心"
          :fixed="false"
          left-text="返回首页"
          rightIconColor="#13D069"
          leftIconColor="#13D069"
          @leftClick="toIndex">
        <view slot="right">
          <u-icon
              name="checkmark-circle"
              color="#13D069 "
              label="全部已读"
              labelPos="left"
              labelColor="#13D069"
          >
          </u-icon>
        </view>
      </u-navbar>
    </view>
    <view class="content">
      <view class="fl">
        <view class="search">
          <u-input placeholder="搜索你想搜索的内容" border="none" prefixIcon="search"
                   prefixIconStyle="font-size: 22px;color: #909399" fontSize="12">
            <template slot="suffix">
              <u-button :customStyle="searchb" text="搜索"></u-button>
            </template>
          </u-input>
        </view>
        <view class="sx">
          <u-icon name="list-dot" color="#333333" width="24rpx" height="24rpx" label="筛选" labelSize="2px"
                  labelPos="bottom"></u-icon>
        </view>
      </view>
      <u-subsection :list="list" :current="current2" @change="change2">
      </u-subsection>
      <view class="u-demo-block">
        <view class="u-page__swipe-action-item">
          <u-swipe-action>
            <u-swipe-action-item :options="options2" v-for="(item, index) in indexList" :key="index">
              <view>
                <u-list-item>
                  <u-cell>
                    <view slot="title">
                      <u-row customStyle="margin-bottom: 10px">
                        <u-col span="11">
                          <text class="celltext-o">艺术节活动开始招募志愿者了！欢迎踊跃报名
                          </text>
                        </u-col>
                        <u-col span="1">
                          <text class="celltext-p">24/2/5</text>
                        </u-col>
                      </u-row>

                      <text class="celltext-t">艺术节活动开始招募志愿者了！欢迎踊跃报名欢迎踊跃报名欢迎踊跃报名</text>
                    </view>
                  </u-cell>
                </u-list-item>
              </view>
            </u-swipe-action-item>
          </u-swipe-action>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      searchb: {
        background: "#13D069",
        color: "white",
        borderRadius: "122rpx",
        width: "102rpx",
        height: "45rpx"
      },
      current2: 0,
      list: ['官方', '任务', '活动', '社群', '其他'],
      // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
      indexList: [],
      indexList2: [],
      urls: [
        'https://cdn.uviewui.com/uview/album/1.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
        'https://cdn.uviewui.com/uview/album/3.jpg',
        'https://cdn.uviewui.com/uview/album/4.jpg',
        'https://cdn.uviewui.com/uview/album/5.jpg',
        'https://cdn.uviewui.com/uview/album/6.jpg',
        'https://cdn.uviewui.com/uview/album/7.jpg',
        'https://cdn.uviewui.com/uview/album/8.jpg',
        'https://cdn.uviewui.com/uview/album/9.jpg',
        'https://cdn.uviewui.com/uview/album/10.jpg',
      ],
      options2: [{
        text: '置顶',
        style: {
          backgroundColor: '#F3B143'
        }
      }, {
        text: '删除',
        style: {
          backgroundColor: '#f56c6c'
        }
      }],
      disabled: false,
      btnWidth: 180,
      show: false,
    }
  },
  methods: {
    toIndex() {

      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    change2(index) {
      this.current2 = index
    },
    loadmore() {
      for (let i = 0; i < 30; i++) {
        this.indexList.push({
          url: this.urls[uni.$u.random(0, this.urls.length - 1)]
        })
      }
    },
    click(index, index1) {
      console.log(index, index1)
      if (index1 == 1) {
        this.list.splice(index, 1);
        this.$u.toast(`删除了第${index}个cell`);
      } else {
        this.list[index].show = false;
        this.$u.toast(`收藏成功`);
      }
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      })
    }

  },
  onLoad() {
    this.loadmore()
  },

}
</script>

<style lang="scss">
.celltext-o {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 24rpx;
  color: #3D3D3D;
  font-weight: 600;
}

.celltext-p {
  color: #999999;
  font-size: 18rpx;
}

.celltext-t {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 18rpx;
  color: #999999;
}

.item {
  display: flex;
  padding: 20rpx;
}

image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.title {
  text-align: left;
  font-size: 28rpx;
  color: $u-content-color;
  margin-top: 20rpx;
}

.content {

  margin: 0 20rpx;
  padding: 0;
}

.search {
  flex: 1;
  border: 1px solid #13D069;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8.5rpx 0 22rpx;
  height: 50rpx;
  color: #999999;
  font-size: 28rpx;
  border-radius: 32rpx;

}

.fl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 22rpx 0;
  margin-top: 20rpx;
}

.sx {
  width: 50rpx;
  height: 60rpx;
}
</style>
